<template>
  <div>
    <vue-ueditor-wrap
      ref="editor"
      v-model="content"
      :config="config"
      :init="init"
      @beforeInit="beforeInit"
    />
    <!-- 素材选择框 -->
    <el-dialog
      title="选择素材"
      :visible.sync="dialogVisible"
      :close-on-click-modal="false"
      width="900px"
    >
      <select-material @autoChecked="autoChecked" />
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="insertMaterial">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import VueUeditorWrap from 'vue-ueditor-wrap'
import SelectMaterial from '@/views/my/classes/material/select/tab.vue'
export default {
  components: {
    VueUeditorWrap,
    SelectMaterial
  },
  props: {
    value: {
      type: String,
      default: ''
    },
    placeholder: {
      type: String,
      default: '请输入内容'
    }
  },
  data() {
    return {
      // 是否显示弹出层
      dialogVisible: false,
      material: {},
      // 当前编辑器
      editor: null,
      // 编辑器内容
      content: '',
      // 配置编辑器
      config: {
        UEDITOR_HOME_URL: '/UEditor/',
        autoHeightEnabled: false,
        initialFrameWidth: 750,
        initialFrameHeight: 450,
        wordCount: false,
        toolbars: [
          [
            'fullscreen',
            '|',
            'undo',
            'redo',
            '|',
            'bold',
            'italic',
            'underline',
            'fontborder',
            'strikethrough',
            'superscript',
            'subscript',
            'removeformat',
            'formatmatch',
            'autotypeset',
            'blockquote',
            'pasteplain',
            '|',
            'forecolor',
            'backcolor',
            'insertorderedlist',
            'insertunorderedlist',
            '|',
            'rowspacingtop',
            'rowspacingbottom',
            'lineheight',
            '|',
            'customstyle',
            'paragraph',
            'fontfamily',
            'fontsize',
            '|',
            'directionalityltr',
            'directionalityrtl',
            'indent',
            '|',
            'justifyleft',
            'justifycenter',
            'justifyright',
            'justifyjustify',
            '|',
            'touppercase',
            'tolowercase',
            '|',
            'link',
            'unlink',
            'anchor',
            '|',
            'emotion',
            'scrawl',
            'insertcode',
            'pagebreak',
            'template',
            '|',
            'horizontal',
            'date',
            'time',
            'spechars',
            '|',
            'print',
            'preview',
            'searchreplace',
            'drafts',
            'kityformula',
            'help'
          ]
        ],
        serverUrl: '',
        allowDivTransToP: false //允许进入编辑器的div标签自动变成p标签
      }
    }
  },
  watch: {
    value(val) {
      // 外部内容发生变化时，将新值赋予编辑器
      if (val && val !== this.content) {
        this.content = this.value
      }
    },
    content(val) {
      if (val !== this.value) {
        // 编辑器内容发生变化时，告知外部，实现 v-model 双向监听效果
        this.$emit('input', val)
      }
    }
  },
  mounted() {
    this.content = this.value
  },
  methods: {
    beforeInit() {
      require('/public/UEditor/third-party/kityformula-plugin/addKityFormulaDialog.js')
      require('/public/UEditor/third-party/kityformula-plugin/defaultFilterFix.js')
      require('/public/UEditor/third-party/kityformula-plugin/getKfContent.js')
    },
    init() {
      this.$refs.editor.registerButton({
        name: '素材',
        icon: '/static/images/ue-editor-wrap/sucai.png',
        tip: '选择素材',
        handler: (editor, name) => {
          this.dialogVisible = true
          this.editor = editor
        }
      })
    },
    // 自动选中,当素材为上传时,自动选中上传的素材
    autoChecked(data) {
      this.material = data
    },
    // 插入素材
    insertMaterial() {
      if (this.$util.isEmpty(this.material)) return
      const { id, type } = this.material
      this.$api.getAttachViewUrl(id, res => {
        const url = res.data.url
        switch (type) {
          case 1:
            // 图片
            this.editor.execCommand(
              'inserthtml',
              '<img src="' + url + '" class="material-image" />'
            )
            break
          case 2:
            // 音频
            this.editor.execCommand(
              'inserthtml',
              '<audio controls src="' + url + '" class="material-audio">暂不支持音频预览</audio> '
            )
            break
          case 3:
            // 视频
            this.editor.execCommand(
              'inserthtml',
              '<video controls style="width:480px;height:auto;" src="' +
                url +
                '" class="material-video">暂不支持视频预览</video> '
            )
            break
        }
        this.dialogVisible = false
      })
    }
  }
}
</script>

<style lang="scss">
.editor-placeholder {
  min-height: 28px;
  border: 1px solid #d5d8de;
}
.edui-default .edui-toolbar {
  .edui-box {
    line-height: initial;
  }
  .edui-for-fullscreen {
    float: none !important;
  }
}
</style>
